<template>
    <div class='shopcar-container'>
        <div class="goods-list">
            <div class="mui-card" v-for="item in list" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch v-model="item.selected"></mt-switch>
                        <img :src="item.src">
                        <div class="info">
                            <h1>{{ item.content }}</h1>
                            <p>
                                <span class='pricebox'>￥{{ item.price }}</span>
                                <span class="box">
                                    <numbox :num="item.count" :goodsid="item.id"></numbox>
                                    <a @click="deletegoods(item.id)">删除</a>
                                </span> 
                            </p>
                        </div>
					</div>
				</div>
			</div>
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner jiesuan" >
                        <div class="left">
                            <p>总计（不含运费）</p>
                            <p>已勾选商品 <strong>{{ this.accounts.num }}</strong> 件，总价 ￥<strong>{{ this.accounts.price }}</strong></p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import numbox from '../../components/subcomponents/shopcar_numberbox.vue'
export default {
    data(){
        return{
            list:[]
        }
    },
    computed:{
        accounts(){
            var result =  this.list.filter(function(item,index){
                return item.selected == true
            })
            var num = price = 0;
			result.forEach(item => {
                num += item.count;
                price += item.price * item.count;
			})
			return {num,price}
        }
    },
    created(){
        this.getgoodslist()
    },
    components:{
        numbox
    },
    methods:{
        getgoodslist(){
            this.list = this.$store.getters.getlist
            console.log(this.list)
        },
        deletegoods(id){
            this.$store.commit("deletegoods",id);
            var car = JSON.parse(localStorage.getItem('car')).filter(function(item,index){
                return item.id !== id
            });
            localStorage.setItem('car',car)

            this.getgoodslist()
        }
    }
}
</script>

<style lang="scss" scoped>
 .shopcar-container{

    background-color:#eee;
    overflow: hidden;

    .goods-list{
        img{
            width: 55px;
            height: 55px;
            margin: 0 8px;
        }

        h1{
            font-size: 12px;
        }

        

        .mui-card-content-inner{
            display: flex;
            align-items: center;
            padding:15px 2px;
            justify-content: space-between;
            padding-left: 5px;
            padding-right: 5px;

            .info{
                 p{
                    .pricebox{
                        color:red;font-weight: bold;
                    }

                    .box{
                        float:right;
                    }
                    
                    margin-bottom: 0px;
                }
            } 

           
        }

        .jiesuan{
            p{
                font-size: 13px;
            }
            .mint-button{
                height: 35px;
            }
        }
    }
 }

</style>

